<template>
  <h1>Welcome to my app</h1>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in banner" :key="item">
      <h3 text="2xl" justify="center">
        <img :src="item.image" alt="" width="100%"/>
      </h3>
    </el-carousel-item>
  </el-carousel>


  <div>
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column label="名称">
        <template #default="scope">
          <router-link :to="{ path: '/detail', query: { id: scope.row.id }}">{{ scope.row.name }}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="stock" label="数量"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="joinShop(scope.row)">加入购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div style="padding-bottom: 20px">
    <el-pagination
        v-model:current-page="query.page"
        v-model:page-size="query.size"
        :page-sizes="[5, 8, 10, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="tool"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <!-- 搜索框 -->
  <el-input v-model="search_data" placeholder="请输入商品名称、价格或数量"/>
  <el-button type="primary" @click="search(search_data)">搜索</el-button>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";
import router from "@/router/index.js";

const banner = ref([]);
const tableData = ref([]);
const tool = ref(0);
const query = ref({
  page: 1,
  size: 2,
  name: '',
  price: '',
  stock: '',
});

const loading = ref(false);

const handleSizeChange = (val) => {
  query.value.size = val;
  query.value.page = 1;
  getData();
};

const handleCurrentChange = (val) => {
  query.value.page = val;
  getData();
};

const search_data = ref('');

const search = (info) => {
  console.log(info);
  if (info) {
    if (!isNaN(info)) {
      if (info.includes('.')) {
        query.value.price = info;
        query.value.name = '';
        query.value.stock = '';
      } else {
        query.value.stock = info;
        query.value.name = '';
        query.value.price = '';
      }
    } else {
      query.value.name = info;
      query.value.price = '';
      query.value.stock = '';
    }
  }
  loading.value = true; // 开始加载
  getData();
  query.value.name = '';
  query.value.price = '';
  query.value.stock = '';
};

const getData = () => {
  axios.get(`http://localhost:8000/app/xxx/?page=${query.value.page}&size=${query.value.size}&name=${query.value.name}&price=${query.value.price}&stock=${query.value.stock}`)
      .then(res => {
        tableData.value = res.data.results;
        tool.value = res.data.count;
        search_data.value = '';
        console.log(res.data);
        loading.value = false; // 加载完成

      })
      .catch(error => {
        console.error('Error fetching data:', error);
        loading.value = false; // 加载失败
      });
};

const joinShop = (info) => {
  console.log(info.id)
  // router.push({path: '/shop'})
  axios.post(`http://localhost:8000/app/shop/`, {id: info.id})
      .then(res => {
        console.log(res.data)
      })
}

onMounted(() => {
  getData();
  axios.get(`http://localhost:8000/app/banner/`)
      .then(res => {
        console.log(res.data)
        banner.value = res.data
      })
});
</script>

